'use client';

interface SkipNavProps {
  href?: string;
  children?: React.ReactNode;
}

export function SkipNav({ href = '#main-content', children }: SkipNavProps) {
  return (
    <a
      href={href}
      className="focus:bg-primary focus:text-primary-foreground focus:ring-ring sr-only focus:not-sr-only focus:absolute focus:left-4 focus:top-4 focus:z-50 focus:rounded-md focus:px-4 focus:py-2 focus:outline-none focus:ring-2 focus:ring-offset-2"
    >
      {children || '跳转到主要内容'}
    </a>
  );
}
